<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of Two-Source Interference</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="420" style="border:1px solid #000;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Function to draw a point with a label
    function drawPoint(x, y, label, label_dx, label_dy) {
        // Draw the point (filled circle)
        ctx.beginPath();
        ctx.arc(x, y, 4, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();
        
        // Draw the label
        if (label) {
            ctx.fillStyle = 'black';
            ctx.fillText(label, x + label_dx, y + label_dy);
        }
    }

    // Function to draw an arc with an arrowhead at the end
    function drawArcWithArrow(ctx, cx, cy, radius, startAngle, endAngle, anticlockwise, label, label_offset_r, label_offset_a) {
        // Draw the arc line
        ctx.beginPath();
        ctx.arc(cx, cy, radius, startAngle, endAngle, anticlockwise);
        ctx.stroke();

        // Calculate arrowhead position
        const arrowSize = 8;
        const arrowX = cx + radius * Math.cos(endAngle);
        const arrowY = cy + radius * Math.sin(endAngle);

        // Calculate tangent angle for the arrowhead direction
        let tangentAngle;
        if (anticlockwise) {
            // Clockwise arc
            tangentAngle = endAngle - Math.PI / 2;
        } else {
            // Counter-clockwise arc
            tangentAngle = endAngle + Math.PI / 2;
        }

        // Draw the arrowhead
        ctx.beginPath();
        ctx.moveTo(arrowX, arrowY);
        ctx.lineTo(arrowX - arrowSize * Math.cos(tangentAngle - Math.PI / 6), arrowY - arrowSize * Math.sin(tangentAngle - Math.PI / 6));
        ctx.moveTo(arrowX, arrowY);
        ctx.lineTo(arrowX - arrowSize * Math.cos(tangentAngle + Math.PI / 6), arrowY - arrowSize * Math.sin(tangentAngle + Math.PI / 6));
        ctx.stroke();
        
        // Draw the angle label
        if (label) {
            const midAngle = (startAngle + endAngle) / 2 + label_offset_a;
            const labelX = cx + (radius + label_offset_r) * Math.cos(midAngle);
            const labelY = cy + (radius + label_offset_r) * Math.sin(midAngle);
            ctx.fillText(label, labelX, labelY);
        }
    }

    // --- Main Drawing Logic ---
    
    // 1. Define constants and coordinates
    const cx = 200; // Center X for point A
    const cy = 200; // Center Y for point A

    // Define points S1 and S2 relative to A
    const s1a_dist = 70;
    const as2_dist = 40;
    const s1_x = cx - s1a_dist;
    const s1_y = cy;
    const s2_x = cx + as2_dist;
    const s2_y = cy;

    // Define angles from the diagram
    const alpha = Math.PI / 7; // ~25.7 degrees
    const phi = (2 * Math.PI) / 3; // 120 degrees

    // Calculate angles for rays AB and AC
    const angle_b = -alpha; // Clockwise from horizontal axis
    const angle_c = angle_b + phi; // Counter-clockwise from AB

    // Define length of rays to points B and C
    const rayLength = 200;
    const b_x = cx + rayLength * Math.cos(angle_b);
    const b_y = cy + rayLength * Math.sin(angle_b);
    const c_x = cx + rayLength * Math.cos(angle_c);
    const c_y = cy + rayLength * Math.sin(angle_c);

    // 2. Set drawing styles
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1.2;
    ctx.font = 'italic 20px Times New Roman';
    
    // 3. Draw the dashed line for S1-A-S2 axis
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    ctx.moveTo(s1_x - 10, s1_y);
    ctx.lineTo(s2_x + 20, s2_y);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid lines

    // 4. Draw the solid rays AB and AC
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(b_x, b_y);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(c_x, c_y);
    ctx.stroke();

    // 5. Draw the points and their labels
    drawPoint(s1_x, s1_y, 'S₁', -30, 8);
    drawPoint(s2_x, s2_y, 'S₂', 10, 8);
    drawPoint(cx, cy, 'A', -25, 10);
    drawPoint(b_x, b_y, 'B', 10, 5);
    drawPoint(c_x, c_y, 'C', 5, -10);

    // 6. Draw the label 'r'
    ctx.fillText('r', cx - s1a_dist + 30, cy - 10);

    // 7. Draw the angles with arcs and arrows
    // Angle α (alpha)
    drawArcWithArrow(ctx, cx, cy, 40, 0, angle_b, true, 'α', 0, 0);

    // Angle φ (phi)
    // The arc starts at line AB (angle_b) and goes to AC (angle_c) counter-clockwise
    drawArcWithArrow(ctx, cx, cy, 100, angle_b, angle_c, false, 'φ', -20, 0);

</script>
</body>
</html>